<style>
    .table-adminlog tr td {
        word-break: break-all;
    }

    .map{
        height: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 9;
    }

    #container{
        /*地图(容器)显示大小*/
        width:100%;
        height:100%;
    }

    #info{
        position: absolute;
        left: 20px;
        top: 20px;
        font-size: 14px;
        background: #FFF;
        width: 270px;
        padding: 10px;
        border-radius: 3px;
    }
</style>
<form id="map-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div style="margin: 20px;overflow:hidden;">
        <div class="row">
            <label class="control-label col-xs-12 col-sm-1">{:__('Current address')}:</label>
            <div class="col-xs-12 col-sm-4" id="map_address">
                <input id="c-address" data-source="meet/store/suggestion" class="form-control selectpage" data-field="title" type="text" value="">
            </div>

            <label class="control-label col-xs-12 col-sm-1">{:__('Current coordinates')}:</label>
            <div class="col-xs-12 col-sm-4">
                <input id="c-location" class="form-control" name="row[location]" type="text" readonly>
            </div>
        </div>
    </div>

    <div class="map">
        <div id="container"></div>
    </div>

    <div class="hide layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="button" class="btn btn-success btn-check">{:__('OK')}</button>
        </div>
    </div>
</form>

<script src="https://map.qq.com/api/gljs?v=1.exp&key={$tencent_map_key}"></script>
<script>
    let longitude = "{$longitude}";
    let latitude = "{$latitude}";

    var markerLayer;
    var map;
    initMap();
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    function initMap() {
        //定义地图中心点坐标
        longitude = longitude ? longitude : 119.302496;
        latitude = latitude ? latitude : 26.080555;
        var center = new TMap.LatLng(latitude, longitude);
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 17.2,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 45    //设置地图旋转角度
        });

        //初始化marker图层
        markerLayer = new TMap.MultiMarker({
            id: 'marker-layer',
            map: map
        });

        var marker = markerLayer.add({
            position: center
        });

        //监听点击事件添加marker
        map.on("click", (evt) => {
            //获取标记点数据
            var geometries_list = markerLayer.getGeometries();
            var ids = [];
            $.each(geometries_list,function (i,v) {
                ids.push(v.id);
            });

            markerLayer.remove(ids);//移除指定id的标注点

            //添加标记点
            markerLayer.add({
                position: evt.latLng
            });

            var lat = evt.latLng.getLat().toFixed(6);
            var lng = evt.latLng.getLng().toFixed(6);
            //position.innerHTML = lat + "," + lng;
            $('#c-location').val(lng + "," + lat);
        });
    }
</script>
